<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script>
        // const inp = document.querySelector('input')

        // // 定义一个全局变量，存储延时器的id
        // let timeId

        // inp.addEventListener('input', function () {
        //     // 判断定时器id有没有值
        //     if (timeId) {
        //         clearTimeout(timeId)
        //     }
        //     timeId = setTimeout(() => {

        //         console.log(this.value + '发送请求');
        //     }, 500)
        // })



        // ================================
        //          封装防抖的函数 
        const inp = document.querySelector('input')
        function debounce(fn, tiem) {
            // 定义一个全局变量 不加声明关键字，就是全局变量
            window.tiemId
            if (window.tiemId) {
                clearTimeout(window.tiemId)
            }
            window.tiemId = setTimeout(fn, tiem)
        }
        inp.addEventListener('input', function () {
            debounce(() => {
                console.log(this.value + '发送请求');
            }, 500)
        })
    </script>
</body>

</html>